<template>  
<div id="myModal" class="modal"> 
    <div class="modal-content">
      <div class="error-page">  
        <template v-if="type == 2">
          <h1>您未点亮小星星</h1>  
          <p>请再试一次。</p>
        </template>
        <template v-else-if="type == 3">
          <h1>您拒绝授权</h1>  
          <p>请再试一次。</p>
        </template>
        <template v-else>
          <h1>密钥错误</h1>  
          <p>您输入的密钥不正确，请重试。</p>
        </template> 
        <p id="countdown" v-if="countdown > 0">{{ countdown }}</p>  
        <button @click="jumpToLogin" :disabled="countdown <= 0">立即跳转</button>  
      </div>  
  </div>
</div>
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      countdown: 3,
      type: 1
    };  
  },  
  mounted() {  
    this.startCountdown();  
    if(typeof window !== 'undefined'){
      const search = window.location.search;  
      const params = new URLSearchParams(search);
      this.type = params.get('type') || 1; 
    }
  },  
  beforeDestroy() {  
    clearInterval(this.countdownInterval);  
  },  
  methods: {  
    startCountdown() {  
      this.countdownInterval = setInterval(() => {  
        if (this.countdown > 0) {  
          this.countdown--;  
        } else {  
          this.jumpToLogin();  
          clearInterval(this.countdownInterval);  
        }  
      }, 1000);  
    },  
    jumpToLogin() {  
      window.location.href = '/login.html';     
    }  
  }  
};  
</script>  
  
<style scoped>  
.modal {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: rgba(0, 0, 0, 0.5);  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    z-index: 99;  
}  

.modal-content {  
    background-color: #fff;  
    padding: 20px;  
    border-radius: 5px;  
    position: relative;  
    width: 500px;
}
body {  
  font-family: Arial, sans-serif;  
  text-align: center;  
  padding-top: 20%;  
  background-color: #f4f4f4;  
}  
h1 {  
  color: #333;  
}  
p {  
  color: #666;  
  font-size: 18px;  
}  
#countdown {  
  font-size: 24px;  
  margin-top: 20px;  
  color: #007bff;  
}  
button {  
  padding: 10px 20px;  
  background-color: #007bff;  
  color: white;  
  border: none;  
  cursor: pointer;  
  margin-top: 20px;  
}  
button:hover {  
  background-color: #0056b3;  
}  
</style>